import React from 'react';
import { Form, Input, Select, Button, Row, Col } from 'antd';
import { getAllFranchises } from '@/services/franchise';

const { Option } = Select;

/**
 * 用户搜索表单组件
 * @param {Object} props
 * @param {Function} props.onSearch - 搜索回调
 * @param {Function} props.onReset - 重置回调
 */
const SearchForm = ({ onSearch, onReset }) => {
  const [form] = Form.useForm();
  const [franchises, setFranchises] = React.useState([]);

  // 获取加盟商列表
  React.useEffect(() => {
    const fetchFranchises = async () => {
      try {
        const res = await getAllFranchises();
        if (res.success) {
          setFranchises(res.data.list || []);
        }
      } catch (error) {
        console.error('获取加盟商列表出错:', error);
      }
    };
    fetchFranchises();
  }, []);

  // 处理搜索
  const handleSearch = () => {
    const values = form.getFieldsValue();
    onSearch(values);
  };

  // 处理重置
  const handleReset = () => {
    form.resetFields();
    onReset();
  };

  return (
    <Form
      form={form}
      layout="inline"
      style={{ marginBottom: 24 }}
    >
      <Row gutter={24} style={{ width: '100%' }}>
        <Col span={6}>
          <Form.Item name="username" label="用户名">
            <Input placeholder="请输入用户名" allowClear />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item name="real_name" label="姓名">
            <Input placeholder="请输入姓名" allowClear />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item name="status" label="状态">
            <Select placeholder="请选择状态" allowClear>
              <Option value={1}>正常</Option>
              <Option value={0}>禁用</Option>
            </Select>
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item name="franchise_id" label="加盟商">
            <Select placeholder="请选择加盟商" allowClear>
              <Option value={0}>总部</Option>
              {franchises.map(franchise => (
                <Option key={franchise.id} value={franchise.id}>
                  {franchise.name}
                </Option>
              ))}
            </Select>
          </Form.Item>
        </Col>
        <Col span={24} style={{ textAlign: 'right', marginTop: 16 }}>
          <Form.Item>
            <Button type="primary" onClick={handleSearch} style={{ marginRight: 8 }}>
              搜索
            </Button>
            <Button onClick={handleReset}>
              重置
            </Button>
          </Form.Item>
        </Col>
      </Row>
    </Form>
  );
};

export default SearchForm;